<template>
  <el-card shadow="always" style="width:668px;height:520px">
      <div slot="header">
          <slot name='topper'></slot>
      </div>
      <!-- card body -->
      <div class="main" ref="main"></div>
  </el-card>
  
</template>

<script>
export default {
    name:'Hanbaer',
    methods:{
        getFood(){
        const chats = this.$echarts.init(this.$refs.main)
        chats.setOption({
                title:{
                    text:'视频',
                    subtext:1048,
                    left:'center',
                    top:'center'
                },
                series: [
                  {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '60%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                      borderRadius: 10,
                      borderColor: '#fff',
                      borderWidth: 2
                    },
                    label: {
                      show: true,
                    },
                    labelLine: {
                      show: true
                    },
                    data: [
                      { value: 1048, name: '北京' },
                      { value: 735, name: '上海' },
                      { value: 580, name: '广州' },
                      { value: 484, name: '深圳' },
                      { value: 2480, name: '济南' }
                    ]
                  }
                ]
                })
                chats.on('mouseover',(values)=>{
                    const {name,value} = values
                    chats.setOption({
                        title:{
                            text:name,
                            subtext:value
                        }
                    })

                })
        }
        
    },
    mounted(){
        this.getFood()
    }
}
</script>

<style>
.main{
    width:500px;
    height:400px;
    margin: 0 auto;
}
</style>